{include file="admin@public/header"/}

<link rel="stylesheet" href="/public/static/admin/css/report.css" />
<link rel="stylesheet" href="/public/static/admin/easyui/layui-v2.6.8/css/layui.css">
<!-- <link rel="stylesheet" type="text/css" href="/public/static/admin/easyui/jeasyui/themes/icon.css"> -->
<style>
	.ui-icon-ellipsis {
		right: 5px;
	}

	#filter-menu .con {
		width: 355px;
	}

	#filter-menu label.tit {
		width: 80px;
	}

	/*.ui-jqgrid tr.jqgrow td {
	white-space: normal !important;
	}
	*/
	.no-query {
		background: url("/public/static/admin/css/img/no_query.png") no-repeat scroll 100px 60px #fff;
		background-position: center;
		border: 1px solid #ddd;
		border-top: none;
		height: 402px;
		margin-right: 0;
	}

	.box-flex {
		overflow: hidden;
		zoom: 1;
	}

	.box-flex .flex {
		float: left;
		width: 33.3%;
	}

	.grid-title {
		font-size: 24px;
		text-align: center;
		clear: none;
	}

	.ui-print .grid-wrap {
		padding: 10px 0 0 30px;
	}

	#conditions-trigger {
		background: url(/public/static/admin/css/img/bg.png) no-repeat;
		border: 0px;
		width: 74px;
		box-shadow: 0px 0px;
	}

	#filter-menu .conditions-trigger>b {
		position: absolute;
		right: 0;
		top: 50%;
		margin-top: -8px;
		width: 16px;
		height: 16px;
		background: url(/public/static/admin/css/img/down.png) 2px 5px no-repeat;
	}

	#filter-menu .conditions-trigger>b.act {
		background: url(/public/static/admin/css/img/up.png) 2px 5px no-repeat;
	}

	#filter-menu .btns {
		position: absolute;
		top: 7px;
		right: 0px;
	}

	.layui-form-checkbox[lay-skin=primary] i {
		padding: 0;
	}

	.layui-form-checked[lay-skin=primary] i {
		border-color: #5dc5e7;
		background-color: #5dc5e7;
		color: #fff;
		padding: 0;
	}

	.layui-form-checkbox[lay-skin=primary]:hover i {
		border-color: #5dc5e7;
	}

	.ui-droplist-wrap {
		height: auto;
	}

	#filterItems {
		height: auto;
	}

	.layui-form-checkbox span {
		font-size: 12px;
	}

	.ul-inline li {
		height: 44px;
		box-sizing: border-box;
	}

	.shadow.opera-log-box::before,
	.shadow.opera-log-box::after {
		border: solid transparent;
		content: ' ';
		height: 0;
		bottom: 100%;
		position: absolute;
		width: 0;
	}

	.shadow.opera-log-box:after {
		border-width: 8px;
		border-bottom-color: #FFEED4;
		left: 50px;
	}

	.shadow.opera-log-box:before {
		border-width: 10px;
		border-bottom-color: #E1B77E;
		left: 48px;
	}

	#filter-menu .mod-choose-input .ui-input {
		width: 210px;
	}
</style>

<div class="wrapper">
	<!-- header -->
	<div class="mod-search cf">
		<div class="l  layui-form" id="filter-menu">
			<ul class="ul-inline fix" id="filterItems" style="font-size: 12px;margin-right: 0;padding-right:15px;">
				<li id="date" style="display: list-item;"><label>单据日期:</label>
					<input type="date" id="startdate" class="ui-input " value="{$month.month_start|date='Y-m-d',###}"
						style="width: 125px;">
					<span class="todate"> 至 </span>
					<input type="date" id="enddate" class="ui-input " value="{$month.month_end|date='Y-m-d',###}"
						style="width: 125px;">
				</li>

				<li id="remarks" style="display: list-item;">
					<label>备注</label>
					<input type="text" value="" placeholder="请输入备注查询" class="ui-input ui-input-ph" name="remarkCon"
						id="remarkCon" style="width: 120px;">
				</li>

				<li id="othertype1" style="display: list-item;">
					<div id="incomeExpenseType">
						<span class="ui-combo-wrap ui-combo-active">
							<input type="text" class="input-txt" value="所有类别" id="incomeExpenseTypeName"
								autocomplete="off" readonly="readonly" style="cursor: default;">
							<span class="trigger"></span>
						</span>
					</div>
				</li>

				<li id="othertype2" style="display: none;">
					<div id="incomeName" class="">
						<span class="ui-combo-wrap ui-combo-active">
							<input type="text" class="input-txt" autocomplete="off" value="所有收入项目" id="incomeNameText">
							<span class="trigger" id="othertype2_trigger"></span>
						</span>
					</div>
				</li>

				<li id="othertype3" style="display: none;">
					<div id="expenseName" class="">
						<span class="ui-combo-wrap ui-combo-active">
							<input type="text" class="input-txt" autocomplete="off" value="所有支出项目" id="expenseNameText">
							<span class="trigger" id="othertype3_trigger"></span>
						</span>
					</div>
				</li>

				<li class="chk-list" style="display: list-item;padding-top: 12px;">
					<div class="btns" style="top: -4px;position: relative;float: right;margin-top: 0;"><a
							class="ui-btn mrb ui-btn-search" id="filter-submit">查询</a>
					</div>
				</li>


				<!-- <span class="url-box" id="openUrl"><a href="https://club.kingdee.com/club/newclub/school/course?product_id=7&amp;cid=1548#pid=5713" target="_blank" class="video-icon" style="margin-right: 5px;"></a>功能简介</span> -->
			</ul>
			<!-- <a href="#" id="conditions-trigger" class="ui-btn conditions-trigger" tabindex="-1">&nbsp;更多条件<b></b></a> -->
		</div>
	</div>

	<!-- 选择类别 -->
	<div class="ui-droplist-wrap" id="incomeExpenseTypeWrap"
		style="position: absolute; z-index: 1000; width: 172px; display: none;">
		<div class="droplist" style="position: relative; overflow: auto; min-height: 150px; height: 150px;">
			<div class="list-item selected" data-value="-1" title="所有类别">所有类别</div>
			<!-- `type` int(4) DEFAULT '0' COMMENT '0其它收入单；1其它支出单', -->
			<div class="list-item" data-value="0" title="其它收入">其它收入</div>
			<div class="list-item" data-value="1" title="其它支出">其它支出</div>
		</div>
	</div>

	<!-- 选择收入项目 -->
	<div class="ui-droplist-wrap" id="othertype2Warp"
		style="position: absolute; z-index: 1000; width: 172px; display: none;">
		<div class="droplist" style="position: relative; overflow: auto; min-height: 150px; height: 150px;">
			<div class="list-item selected" data-value="0" title="所有收入项目">所有收入项目</div>
			{volist name='income_type' id="vo"}
			<div class="list-item" data-value="{$vo.id}" title="{$vo.name}">{$vo.name}</div>
			{/volist}
		</div>
	</div>

	<!-- 选择支出项目 -->
	<div class="ui-droplist-wrap" id="othertype3Warp"
		style="position: absolute; z-index: 1000; width: 172px; display: none;">
		<div class="droplist" style="position: relative; overflow: auto; min-height: 150px; height: 150px;">
			<div class="list-item selected" data-value="0" title="所有支出项目">所有支出项目</div>
			{volist name="money_type" id="vo"}
			<div class="list-item" data-value="{$vo.id}" title="{$vo.name}">{$vo.name}</div>
			{/volist}
		</div>
	</div>




	<!-- no data -->
	<div class="no-query"></div>
	<!-- grid begin -->
	<div class="ui-print" id="ui-print" style="visibility: hidden;">
		<!-- 列配置 -->
		<div class="cf box-flex">
			<div class="flex">
				<span id="config" class="ui-config"><a href="#" class="ui-icon-config-new"></a>列设置</span>
			</div>

			<div class="grid-title flex">
				<div>其它收支明细表</div>
			</div>
			<div class="fr">
				<a href="#" class="ui-btn ui-btn-export btn-sm mrb fl" id="btn-export">导出</a>
				<a href="#" class="ui-btn ui-btn-print btn-sm fl" id="btn-print">打印</a>
			</div>
		</div>

		<div class="grid-wrap" id="grid-wrap" style="padding-bottom: 30px;padding-right: 30px;">
			<!--startprint-->
			<div class="grid-subtitle"></div>

			<table id="grid"></table>
			<!--endprint-->
			<div id="page"></div>
		</div>
	</div>
	<!-- grid end -->

	<div style="display: none;">
		<!-- 类别id -->
		<input type="hidden" id="incomeExpenseTypeId">
		<!-- 收入id -->
		<input type="hidden" id="incomeId">
		<!-- 支出id -->
		<input type="hidden" id="expenseId">
	</div>
</div>

<script type="text/javascript" src="/public/static/admin/easyui/jeasyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
	function preview(oper) {
		if (oper < 10) {
			$("#grid-wrap").jqprint();
		} else {
			window.print();
		}
	}
</script>


<script type="text/javascript">

	$(document).ready(function () {

		// 点击查询按钮
		$("#filter-submit").click(function () {
			$("#ui-print").css({ "visibility": "visible" });  //显示表格数据
			$(".no-query").hide();  //隐藏提示

			// 设置表格高度
			$("#grid").setGridHeight($(window).height() - 290 - $("#filter-menu").height() + "px");

			var startdate = $('#startdate').val();
			var enddate = $('#enddate').val();
			$("div.grid-subtitle").html('日期: ' + startdate + ' 至 ' + enddate);

			//此处可以添加对查询数据的合法验证 
			$("#grid").jqGrid('setGridParam', {
				datatype: 'json',
				postData: { 'ajax': '100', startdate: startdate, enddate: enddate }, //发送数据 
				page: 1
			}).trigger("reloadGrid"); //重新载入 
		});


		$("#grid").jqGrid({
			url: '/money/otherincomedetail/index.html?ajax=100',
			datatype: "json",//数据来源，本地数据（local，json,jsonp,xml等）
			height: '90%',//高度，表格高度。可为数值、百分比或'auto'
			width: '100%',
			//width: Public.setGrid().w,
			//height: Public.setGrid().h,
			colNames: ["id", "日期", "单据编号", "收支类别", "收支项目", "收入", "支出", "往来单位", "摘要", "type"],
			colModel: [
				{ name: 'id', hidden: true },
				{ name: 'dj_time', index: '', width: 150, label: "日期", align: "center" },
				{ name: 'sn', index: '', width: 110, label: "单据编号", align: "center" },
				{ name: 'type_name', index: '', width: 110, label: "收支类别", align: "center" },
				{ name: 'income_type_name', index: '', width: 110, label: "收支项目", align: "center" },
				{ name: 'shouru', index: '', width: 120, label: "收入", align: "center" },
				{ name: 'zhichu', index: '', width: 120, label: "支出", align: "center" },
				{ name: 'user_name', index: '', width: 110, label: "往来单位", align: "center" },
				{ name: 'mark', index: '', width: 110, label: "摘要", align: "center" },
				{ name: 'type', hidden: true },
			],
			rowNum: 10,
			rowList: [10, 20, 30],
			sortname: 'id',
			sortorder: "desc",
			pagerpos: "left",//分页位置

			pgbuttons: true,//翻页按钮
			pagination: true,
			altRows: false,
			gridview: !0,
			shrinkToFit: !1,
			cellLayout: 8,
			autowidth: !0,
			pager: "#page",
			viewrecords: !0,
			cmTemplate: {
				sortable: !1,
				title: !1
			},
			loadError: function (t, e, i) {
				parent.Public.tips({
					type: 1,
					content: "操作失败了哦，请检查您的网络链接！"
				})
			},
			// 合计
			footerrow: true,
			gridComplete: function () {
				var prices = $("#grid").getCol('ave_price', false, 'avg');
				var numbers = $("#grid").getCol('number', false, 'sum');
				$("#grid").footerData('set', { "goods_category_name": '合计', ave_price: prices, number: numbers });
			},

			//双击表格行事件
			ondblClickRow: function (row) {
				var rowData = $('#grid').jqGrid('getRowData', row);
				let url = '';
				console.log(rowData.type);
				if (rowData.type == 0) {
					parent.tab.addTabItem({
						tabid: "money",
						text: "其他收入单",
						url: "/money/oriinc/details.html?order_id=" + rowData.id,
					})
				} else {
					parent.tab.addTabItem({
						tabid: "money",
						text: "其他支出单",
						url: "/money/oriexp/details.html?order_id=" + rowData.id,
					})
				}
			},
		});


		var headH = 0;  //顶部搜索是否展开（1：展开，0：未展开）
		$("#conditions-trigger").click(function () {
			if (headH == 0) {
				headH = 1;
				$("#filterItems").css({ "height": "auto" });
				$(this).html("&nbsp;收起条件<b class='act'></b>");
				// 设置表格高度
				$("#grid").setGridHeight($(window).height() - 290 - $("#filter-menu").height() + "px");
			} else {
				headH = 0;
				$("#filterItems").css({ "height": "44px" });
				// $("#filterItems").animate({height:'44px'});
				$(this).html("&nbsp;更多条件<b></b>");
				// 设置表格高度
				$("#grid").setGridHeight($(window).height() - 290 - $("#filter-menu").height() + "px");
			}
		});

	});



</script>

<script>
	$(document).ready(function () {
		// 选择类别
		$("#incomeExpenseType").click(function () {
			var top = $(this).offset().top;
			var left = $(this).offset().left;
			$("#incomeExpenseTypeWrap").css({ "top": (top + 32) + "px", "left": (left) + "px" });
			$("#incomeExpenseTypeWrap").toggle();
		});
		// 类别赋值
		$("#incomeExpenseTypeWrap .list-item").click(function () {
			var title = $(this).attr("title");
			var val = $(this).attr("data-value");
			$("#incomeExpenseTypeName").val(title);
			$("#incomeExpenseTypeId").val(val);
			$(this).addClass("selected").siblings().removeClass("selected");
			$("#incomeExpenseTypeWrap").hide();

			// 通过id判断收入、支出。显示对应的搜索框
			if (val == 0) {
				$("#othertype2").css({ "display": "list-item" });
				$("#othertype3").css({ "display": "none" });
			} else if (val == 1) {
				$("#othertype2").css({ "display": "none" });
				$("#othertype3").css({ "display": "list-item" });
			} else {
				$("#othertype2").css({ "display": "none" });
				$("#othertype3").css({ "display": "none" });
			}
		});
	});

	//选择类别-选择框外点击则隐藏
	$(document).mouseup(function (e) {
		if (e.target.id != "incomeExpenseTypeName") {
			var con = $("#incomeExpenseTypeWrap");   // 设置目标区域
			if (!con.is(e.target) && con.has(e.target).length === 0) {
				$("#incomeExpenseTypeWrap").hide();
			}
		}
	});


	$(document).ready(function () {
		// 选择收入
		$("#othertype2_trigger").click(function () {
			var top = $(this).offset().top;
			var left = $(this).offset().left;
			$("#othertype2Warp").css({ "top": (top + 30) + "px", "left": (left - 156) + "px" });
			$("#othertype2Warp").toggle();
		});
		// 收入赋值
		$("#othertype2Warp .list-item").click(function () {
			var title = $(this).attr("title");
			var val = $(this).attr("data-value");
			$("#incomeNameText").val(title);
			$("#incomeId").val(val);
			$(this).addClass("selected").siblings().removeClass("selected");
			$("#othertype2Warp").hide();
		});
	});

	//选择收入-选择框外点击则隐藏
	$(document).mouseup(function (e) {
		if (e.target.id != "othertype2_trigger") {
			var con = $("#othertype2Warp");   // 设置目标区域
			if (!con.is(e.target) && con.has(e.target).length === 0) {
				$("#othertype2Warp").hide();
			}
		}
	});

	$(document).ready(function () {
		// 选择支出
		$("#othertype3_trigger").click(function () {
			var top = $(this).offset().top;
			var left = $(this).offset().left;
			$("#othertype3Warp").css({ "top": (top + 30) + "px", "left": (left - 156) + "px" });
			$("#othertype3Warp").toggle();
		});
		// 支出赋值
		$("#othertype3Warp .list-item").click(function () {
			var title = $(this).attr("title");
			var val = $(this).attr("data-value");
			$("#expenseNameText").val(title);
			$("#expenseId").val(val);
			$(this).addClass("selected").siblings().removeClass("selected");
			$("#othertype3Warp").hide();
		});
	});

	//选择支出-选择框外点击则隐藏
	$(document).mouseup(function (e) {
		if (e.target.id != "othertype3_trigger") {
			var con = $("#othertype3Warp");   // 设置目标区域
			if (!con.is(e.target) && con.has(e.target).length === 0) {
				$("#othertype3Warp").hide();
			}
		}
	});
</script>


{include file="admin@public/footer"/}